<template>
  <div class="Rank">
    <h1>官方榜</h1>
    <div
      class="rank-list"
      v-for="item in topList.slice(0, 4)"
      :key="item.songid"
    >
      <h3>{{ item.name }}</h3>
      <div class="item" @click="selectRankList(item)">
        <img :src="item.coverImgUrl" alt="" />
        <ul>
          <span class="item-update">{{ item.updateFrequency }}</span>
          <li v-for="(song, index) in item.tracks" :key="song.index">
            <span class="item-num">{{ index + 1 }}.</span>
            <span class="item-first">{{ song.first }}</span>
            <span>-{{ song.second }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      topList: [],
      Detail: [],
      songid: "",
    };
  },
  created() {
    this.getTopList();
    // this.getDetail();
  },
  methods: {
    getTopList() {
      axios
        .get("api/toplist/detail", {
          params: {
            // id: this.$route.params.id,
          },
        })
        .then((res) => {
          // console.log(res.data);
          this.topList = res.data.list;
          console.log(this.topList);
          // console.log(res.data);
          // this.Detail = res.data;
        })
        .catch((err) => {
          console.error(err);
        });
    },

    selectRankList(item) {
      const songid = item.id;
      console.log(item.id);
      console.log(songid);
      // this.songid=songid,
      this.$router.push({
        name: "RankListDetail",
        params: { songid: songid },
      });
    },
  },
};
</script>
<style scoped>
.item {
  display: flex;
}
.item > h3 {
  /* text-align: left;
  padding-left: 50px; */
  text-align: center;
}
.item > img {
  width: 35%;
  height: 35%;
  margin-left: 15px;
  border-radius: 20px;
}
.item > ul > .item-update {
  font-size: 15px;
  padding-left: 160px;
}
.item > ul > li {
  padding-top: 10px;
  text-align: left;
  padding-left: 10px;
}
.item > ul > li > .item-num {
  font-size: 20px;
}
.item > ul > li > .item-first {
  font-size: 20px;
}
</style>